import React from 'react';
import { Card, Typography, Switch, Button } from 'antd';
import { EditOutlined } from '@ant-design/icons';
import cls from 'classnames';
import './styles.less';

export interface IThemeListProps {
  themeStyle: Record<string, any>;
  actionClick: {
    onDefault: (id: any, versionNum: any) => any;
    onThemeEdit: (id: any) => any;
    onOpen: (isOpen: any, id: any, versionNum: any) => any;
  };
}

export const ThemeList: React.FC<IThemeListProps> = ({
  themeStyle,
  actionClick: { onDefault, onOpen, onThemeEdit },
}) => {
  const currentButton = () => {
    if (String(themeStyle?.isDefault) == '1') {
      return (
        <Button type={'primary'} size={'small'}>
          默认主题
        </Button>
      );
    } else {
      return (
        <Button
          type={'link'}
          size={'small'}
          onClick={() => {
            onDefault(themeStyle?.id, themeStyle?.versionNum);
          }}
          style={{
            whiteSpace: 'initial',
          }}
        >
          设置默认主题
        </Button>
      );
    }
  };

  return (
    <Card
      className={cls('theme-card')}
      id={themeStyle?.id}
      actions={[
        <EditOutlined
          onClick={() => {
            onThemeEdit(themeStyle?.id);
          }}
        />,
        <Switch
          checkedChildren="开启"
          unCheckedChildren="关闭"
          checked={String(themeStyle?.isOpen) == '1'}
          onChange={(e) => {
            if (e) {
              onOpen(1, themeStyle?.id, themeStyle?.versionNum);
            } else {
              onOpen(0, themeStyle?.id, themeStyle?.versionNum);
            }
          }}
        />,
        currentButton(),
      ]}
    >
      <div className={cls('theme-view')}>
        <div
          className={cls('theme-view-side')}
          style={{ background: themeStyle?.defaultStyle?.['@primary-color'] }}
        >
          <div className={cls('theme-side-child')}></div>
        </div>
        <div className={cls('theme-view-content')}>
          <div className={cls('theme-view-head')}></div>
        </div>
      </div>
      <div className={cls('theme-title')}>
        <Typography.Title
          level={5}
          style={{ color: themeStyle?.defaultStyle?.['@primary-color'] }}
        >
          {themeStyle?.name}
        </Typography.Title>
      </div>
    </Card>
  );
};
